<script type="text/x-template" id="cc-layout-edit-el">
    <el-dialog
            class="cc-db-table-selector"
            title="创建布局"
            :visible.sync="visible"
            :modal="false"
            size="full"
            :before-close="handleClose">
        <el-form :rules="rules" ref="dataForm" :model="data" label-width="170px">
            <el-form-item label="布局类型" prop="type">
                <el-radio-group
                        v-model="data.type"
                >
                    <el-radio v-for="(item, key) in TYPE_DICT" :key="key" :label="item.value">{{
                        item.label
                        }}
                    </el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="推荐位宽度">
                <el-input-number :min="1" :max="1760" :step="1"
                                 v-model.number="data.width"/>
            </el-form-item>
            <el-form-item label="推荐位高度">
                <el-input-number :min="1" :max="1760" :step="1"
                                 v-model.number="data.height"/>
            </el-form-item>
            <template v-if="data.type === 'Panel'">
                <el-form-item label="一行推荐位个数">
                    <el-input-number :min="1" :max="20" :step="1"
                                     v-model.number="data.size"/>
                </el-form-item>
            </template>
            <el-form-item label="是否带标题" prop="hasTitle">
                <el-radio-group
                        v-model="data.hasTitle"
                >
                    <el-radio v-for="(item, key) in TRUE_FALSE_DICT" :key="key" :label="item.value">{{
                        item.label
                        }}
                    </el-radio>
                </el-radio-group>
            </el-form-item>
            <template v-if="data.type === 'Expander'">
                <el-form-item label="是否带异形的" prop="hasTitle">
                    <el-radio-group
                            v-model="data.hasSpecial"
                    >
                        <el-radio v-for="(item, key) in TRUE_FALSE_DICT" :key="key" :label="item.value">{{
                            item.label
                            }}
                        </el-radio>
                    </el-radio-group>
                </el-form-item>
            </template>
            <template v-if="data.hasSpecial === 1">
                <el-form-item label="异形推荐位宽度">
                    <el-input-number :min="1" :max="1760" :step="1"
                                     v-model.number="data.specialWidth"/>
                </el-form-item>
                <el-form-item label="异形推荐位高度">
                    <el-input-number :min="1" :max="1760" :step="1"
                                     v-model.number="data.specialHeight"/>
                </el-form-item>
            </template>
            <el-form-item >
                <el-button type="primary" @click="genLayout">
                    生成布局
                </el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</script>

<script>
    Vue.component('cc-layout-edit-el', {
        template: '#cc-layout-edit-el',
        data() {
            return {
                //是否横向扩展布局
                isExpander: false,
                TRUE_FALSE_DICT: [
                    {
                        label: '是',
                        value: 1
                    },
                    {
                        label: '否',
                        value: 0
                    }
                ],
                TYPE_DICT: [
                    {
                        label: '普通布局',
                        value: 'Panel'
                    },
                    {
                        label: '扩展布局',
                        value: 'Expander'
                    }
                ],
                data:{
                    type: 'Panel',
                    width: 154,
                    height: 154,
                    size:8,
                    hasTitle: 0,
                    hasSpecial:0,
                    specialWidth: 400,
                    specialHeight: 154
                },
                rules: {
                    'data.width': [
                        {required: true, message: '请输入数据库URL', trigger: 'blur'}
                    ],
                    'data.height': [
                        {required: true, message: '请输入数据库账号', trigger: 'blur'}
                    ],
                },
                UI8_WIDTH: 1760,
                UI8_VERSION: 'v8',
                PANEL: 'Panel',
                EXPANDER: 'Expander',
                BLOCK: 'Block',
                TITLE_HEIGHT: 58,
                TITLE_SIZE: 32,
                SPACE:40
            }
        },
        computed: {},
        methods: {
            handleClose() {
                this.$emit('cancel')
            },
            genLayout() {
                this.validateFormData(function (err) {
                    if (!err) {
                        const layout = this.doLayout();
                        console.log(layout);
                        this.$emit('layout-change', layout)
                    }
                }.bind(this))
            },
            doLayout(){
                 if (this.data.type === 'Panel'){
                     return this.doPanelLayout()
                 }else if(this.data.type === 'Expander'){
                     return this.doExpanderLayout()
                 }else {
                     this.$message({
                         type: 'error',
                         message: '没有此种布局的处理！'
                     })
                 }
            },
            doPanelLayout(){
                let result = {}
                let contents = []
                const space = Math.round((this.UI8_WIDTH-this.data.size*this.data.width)*1.0/(this.data.size-1))
                const width = this.data.width;
                const height = this.data.height;
                let index =0;
                for (;index< this.data.size; index++){
                    let  block = {};
                    block.width = width;
                    block.height = height;
                    let x = (width + space) * index;
                    block.x=x;
                    block.y =0;
                    block.parents = '';
                    block.type = this.BLOCK
                    if (this.data.hasTitle){
                        let resize = {};
                        resize.width = width;
                        resize.height = height + this.TITLE_HEIGHT;
                        resize.x =x;
                        resize.y=0;
                        block.resize = resize;
                        let titleInfo = {};
                        titleInfo.height = this.TITLE_HEIGHT;
                        titleInfo.size = this.TITLE_SIZE;
                        titleInfo.width = width;
                        block.title_info = titleInfo;
                    }
                    contents.push(block);
                }
                result.contents = contents;
                result.parents = '';
                result.type = this.PANEL;
                result.version= this.UI8_VERSION;
                return  result;
            },
            doExpanderLayout(){
                let result = {}
                let contents = []
                let special = {};
                if(this.data.hasSpecial){
                    special.width = this.data.specialWidth;
                    special.height = this.data.specialHeight;
                    special.x=0;
                    special.y =0;
                    special.type = this.BLOCK
                    special.loop = true;
                    if (this.data.hasTitle){
                        this.handleHasTitleForExpander(special, this.data.specialWidth, this.data.specialHeight)
                    }
                    contents.push(special)
                }
                let block = {}
                const width = this.data.width;
                const height = this.data.height;
                block.width = width;
                block.height = height;
                block.x= this.data.hasSpecial ===1 ? this.data.specialWidth + this.SPACE : 0;
                block.y =0;
                block.type = this.BLOCK
                block.loop = true;
                let resizeHeight = height + this.TITLE_HEIGHT
                if (this.data.hasTitle){
                    let resize = {};
                    resize.width = width;
                    resize.height = resizeHeight;
                    resize.x = this.data.hasSpecial ===1 ? this.data.specialWidth + this.SPACE : 0;
                    resize.y=0;
                    block.resize = resize;
                    let titleInfo = {};
                    titleInfo.height = this.TITLE_HEIGHT;
                    titleInfo.size = this.TITLE_SIZE;
                    titleInfo.width = width;
                    block.title_info = titleInfo;
                }
                contents.push(block)
                let extra={}
                extra.width=width
                extra.height= this.data.hasTitle === 1?resizeHeight : height
                extra.orientation=0
                extra.space=this.SPACE
                result.contents = contents;
                result.extra = extra;
                result.type = this.EXPANDER;
                result.version= this.UI8_VERSION;
                return  result;
            },
            handleHasTitleForExpander(block, width, resizeHeight){
                let resize = {};
                resize.width = width;
                resize.height = resizeHeight;
                resize.x =0;
                resize.y=0;
                block.resize = resize;
                let titleInfo = {};
                titleInfo.height = this.TITLE_HEIGHT;
                titleInfo.size = this.TITLE_SIZE;
                titleInfo.width = width;
                block.title_info = titleInfo;
            },
            //校验
            validateFormData(cb) {
                this.$refs.dataForm.validate(function (valid) {
                    if (valid) {
                        cb()
                    } else {
                        this.$message({
                            type: 'error',
                            message: '请把表单填写完整'
                        })
                        cb(true)
                    }
                }.bind(this))
            },
        },
        watch: {},
        mounted() {

        },
        created() {
            this.visible = true
        }
    })
</script>
